<template>
	<view class="detail-container">
		<uni-nav-bar shadow left-icon="left" title="摄影师详情" @clickLeft="back" />
		<!-- 顶部信息区域 -->
		<view class="header">
			<view class="photographer-info">
				<ImgVue :src="photographer[0].avatar" class="avatar"/>
				<view class="info-main">
					<view class="name">{{photographer.name}}</view>
					<view class="rating">
						<uni-icons v-for="i in 5" :key="i" 
							:type="i <= photographer.rating ? 'star-filled' : 'star'" 
							size="16" 
							:color="i <= photographer.rating ? '#FFD700' : '#999'">
						</uni-icons>
						<text class="score">{{photographer.score}} ({{photographer.reviews}}评价)</text>
					</view>
				</view>
			</view>
			<view class="experience">{{photographer.experience}}</view>
			<view class="tags">
				<text class="tag" v-for="(tag, index) in photographer.tags" :key="index">{{tag}}</text>
			</view>
		</view>

		<!-- 代表作品 -->
		<view class="section">
			<view class="section-title">代表作品</view>
			<view class="works-grid">
				<image v-for="(work, index) in photographer.works" 
					:key="index"
					:src="work"
					mode="aspectFill"
					class="work-image"
					@click="previewImage(work, photographer.works)">
				</image>
			</view>
		</view>

		<!-- 服务详情 -->
		<view class="section">
			<view class="section-title">服务详情</view>
			<view class="service-items">
				<view class="service-item">
					<view class="item-title">拍摄风格</view>
					<view class="item-content">{{photographer.style}}</view>
				</view>
				<view class="service-item">
					<view class="item-title">专业器材</view>
					<view class="item-content">{{photographer.equipment}}</view>
				</view>
			</view>
		</view>

		<!-- 价格套餐 -->
		<view class="section">
			<view class="section-title">价格套餐</view>
			<view class="price-packages">
				<view class="package" v-for="(pkg, index) in photographer.packages" :key="index">
					<view class="package-header">
						<text class="package-name">{{pkg.name}}</text>
						<text class="package-price">¥{{pkg.price}}</text>
					</view>
					<view class="package-details">
						<view class="detail-item" v-for="(detail, dIndex) in pkg.details" :key="dIndex">
							{{detail}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<view class="like-btn">
				<uni-icons type="heart" size="24" color="#666"></uni-icons>
			</view>
			<view class="contact-btn">
				<uni-icons type="chat" size="24" color="#666"></uni-icons>
				<text>咨询详情</text>
			</view>
			<view class="book-btn">立即预约</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app';
import { getPhotoGrapher } from '../../api/photographer';
import ImgVue from '../../components/Img/Img.vue';
const photographer = ref({
	avatar: '',
	name: '',
	rating: 0,
	score: '',
	reviews: '',
	experience: '',
	tags: [],
	works: [],
	style: '',
	equipment: '',
	packages: []
})

onMounted(() => {
	// 获取页面参数中的 id
	photographer.value = {
		id: index.value,
		name: '陈明宇',
		rating: 4,
		score: '4.8',
		reviews: '328',
		experience: '8年专业摄影经验',
		tags: ['人像摄影', '婚礼跟拍', '商业摄影'],
		style: '自然随性，注重光影，擅长捕捉真实感瞬间，采用环境光与人工光结合的拍摄方式。',
		equipment: '索尼 A7M4、蔡司 85mm F1.4、专业闪光灯组、柔光箱等专业器材',
		works: [
			'/static/works/1-1.jpg',
			'/static/works/1-2.jpg',
			'/static/works/1-3.jpg'
		],
		packages: [
			{
				name: '基础套餐',
				price: '699',
				details: [
					'2小时拍摄时长',
					'20张精修照片',
					'提供所有原片',
					'7天内出片'
				]
			},
			{
				name: '进阶套餐',
				price: '1299',
				details: [
					'4小时拍摄时长',
					'40张精修照片',
					'提供所有原片',
					'5天内出片'
				]
			}
		]
	}
})

const index = ref(null)
const previewImage = (current, urls) => {
	uni.previewImage({
		current,
		urls
	})
}

const back = () => {
	uni.navigateBack({
		delta: 1
	})
}

const fetchPhotoGrapherDetail = async () => {
	try {
		const response = await getPhotoGrapher(index.value);

		// 将后端返回的数据与 mock 数据合并
		photographer.value = {
			...response.data, // 后端返回的实际数据
			// Mock 补充字段
			rating: Math.floor(Math.random() * 5) + 1, // 随机评分 1-5
			score: (4 + Math.random()).toFixed(1), // 随机评分 4.0-5.0
			reviews: Math.floor(Math.random() * 500) + 100, // 随机评论数 100-600
			experience: `${Math.floor(Math.random() * 10) + 1}年专业摄影经验`, // 随机年限 1-10 年
			tags: ['人像摄影', '婚礼跟拍', '商业摄影'], // 固定标签，可以根据需求更改
			style: '自然随性，注重光影，擅长捕捉真实感瞬间，采用环境光与人工光结合的拍摄方式。', // Mock 风格描述
			equipment: '索尼 A7M4、蔡司 85mm F1.4、专业闪光灯组、柔光箱等专业器材', // Mock 使用设备
			works: [ // Mock 作品图片
				`https://picsum.photos/seed/${response.data.id}-1/400/300`,
				`https://picsum.photos/seed/${response.data.id}-2/400/300`,
				`https://picsum.photos/seed/${response.data.id}-3/400/300`
			],
			packages: [ // Mock 套餐数据
				{
					name: '基础套餐',
					price: '699',
					details: [
						'2小时拍摄时长',
						'20张精修照片',
						'提供所有原片',
						'7天内出片'
					]
				},
				{
					name: '进阶套餐',
					price: '1299',
					details: [
						'4小时拍摄时长',
						'40张精修照片',
						'提供所有原片',
						'5天内出片'
					]
				}
			]
		};

		console.log(photographer.value);
	} catch (error) {
		console.error('获取摄影师详情失败:', error);
	}
};


onLoad((options) => {
	if (options.index) {
		index.value = options.index
		fetchPhotoGrapherDetail();
	}
});
</script>

<style scoped>
.detail-container {
	padding-bottom: 120rpx; /* 为底部操作栏留出空间 */
}

.header {
	padding: 30rpx;
	background: #fff;
}

.photographer-info {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
}

.avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
	margin-right: 20rpx;
}

.info-main {
	flex: 1;
}

.name {
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.rating {
	display: flex;
	align-items: center;
}

.score {
	margin-left: 10rpx;
	color: #666;
	font-size: 28rpx;
}

.experience {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 20rpx;
}

.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
}

.tag {
	padding: 8rpx 24rpx;
	background: #f5f5f5;
	border-radius: 20rpx;
	font-size: 24rpx;
	color: #666;
}

.section {
	margin-top: 20rpx;
	padding: 30rpx;
	background: #fff;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
}

.works-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10rpx;
}

.work-image {
	width: 100%;
	height: 220rpx;
	border-radius: 8rpx;
}

.service-items {
	margin-top: 20rpx;
}

.service-item {
	margin-bottom: 30rpx;
	background-color: #f9f9f9;
	border-radius: 12rpx;
	padding: 20rpx;
}

.item-title {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 15rpx;
	font-weight: 500;
}

.item-content {
	font-size: 26rpx;
	color: #666;
	line-height: 1.6;
}

.price-packages {
	display: flex;
	gap: 20rpx;
}

.package {
	flex: 1;
	background: #f9f9f9;
	border-radius: 12rpx;
	padding: 20rpx;
}

.package-header {
	margin-bottom: 20rpx;
}

.package-name {
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
}

.package-price {
	display: block;
	font-size: 36rpx;
	color: #ff6b81;
	font-weight: bold;
	margin-top: 10rpx;
}

.detail-item {
	font-size: 24rpx;
	color: #666;
	margin-bottom: 10rpx;
	position: relative;
	padding-left: 20rpx;
}

.detail-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 12rpx;
	width: 6rpx;
	height: 6rpx;
	background: #666;
	border-radius: 50%;
}

.bottom-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background: #fff;
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
}

.like-btn {
	padding: 20rpx;
}

.contact-btn {
	display: flex;
	align-items: center;
	gap: 10rpx;
	padding: 20rpx;
	margin-right: 30rpx;
}

.book-btn {
	flex: 1;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	background: #ff6b81;
	color: #fff;
	border-radius: 40rpx;
	font-size: 30rpx;
}
</style>
